import { createContext , useState,useContext} from "react";


const AuthContext=createContext();

//! 封装到一起，省得引入两次（联系useContext文件夹里的todoList）
export const useAuth=()=>{
    return useContext(AuthContext)
}

//! 封装成一个组件，直接套在app上 
const AuthProvider=(props)=>{
                                    //* 从本地存储里获取状态初始值，如果没有就设为false。
                                    //* 否则当值为true显示 设置 退出 时，再刷新，重新渲染，islogin值又变为false，上面的状态栏又变为登录了 
    const [islogin,setIslogin]=useState(localStorage.getItem('islogin')||false)

    // * 谁在provider里面，谁就能取到
                                        //! 对象属性名属性值一样的简写形式
    return <AuthContext.Provider value={{islogin,setIslogin}}>
        {/* //* 类比New组件，如果不写children，只在App.js里套上AuthProider的话，不会显示内容 */}
        {props.children}
    </AuthContext.Provider>
}

export default AuthProvider;

/**
 ** const New=()=>{
 **    return {props.children}
 ** }
 ** <New>jjjjj</New>
 */ 